<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>OEE设备分析</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-ui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/layui.css" />
	</head>
	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
	            <p class="contentText local"><span>位置：设备管理 > 设备OEE分析</span></p>
	            
            	<!-- 搜索区 -->
	            <div class="search_area">
                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>设备OEE分析查询条件</span></h4>
                    <div class="select_area">
                        <div class="select_text clear">
                        	<div class="label_input">
	                            <label class="contentText">产线：</label> <select><option>产线一</option></select>
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">设备：</label> <select><option>贴片机</option><option>锡膏印刷机</option><option>回流炉</option></select>
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">开始时间：</label> <input type="text" id="dateControl" readonly="readonly">
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">结束时间：</label> <input type="text" id="dateControl2" readonly="readonly">
                        	</div>
                        	
													
							<div class="label_input">
								<label class="contentText">年月：</label> <select><option>---请选择---</option><option>按月</option><option>按年</option></select>
							</div>  
													
                            <div class="floatLeft">
	                            <button class="btn_search bgd_blue_search">查询</button>
	                            <button class="btn_clear bgd_white_clear">重置</button>
                            </div>
                        </div>
                    </div>
                    
	            </div>
	            
	            <!-- 列表区 -->
	            <div class="show_list">
                	<div class="title_operate">
                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>产品信息信息列表</span></h4>
                		
                        <!-- 操作类型区 -->
                        <div class="operate_area">
                            <a href="planProductDate.html" class="layui-btn layui-btn-xs layui-btn-normal" style="width: 150px;">配置计划生产时间</a>                             
                        </div>
                	</div>
                	<div class="list_area">
                        <!-- 信息列表区 -->
                        <div class="info_area">
                            <table class="tablelist" border="1" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr class="menuText list_head">
                                       
                                        <th class="">设备名称</th>
                                        <th class="">设备编号</th>
                                        <th class="">所属产线</th>
                                        <th class="">时间</th>
                                        <th class="">计划生产时间</th>                                       
                                        <th class="">开动时间</th>
                                        <th class="">时间开动率</th>
                                        <th class="">总产量</th>
                                        <th class="">合格数量</th>
                                        <th class="">合格率</th>
                                        <th class="">标准生产时间</th>
                                        <th class="">性能开动率</th>
                                        <th class="">OEE</th>
                                    </tr>
                                </tbody>
                                <tbody class="tablelist">
                                    <tr class="listTableText list_list">
                                        <td>贴片机</td>
                                        <td>XAM-2020-001</td>
                                        <td>电装线</td>
                                        <td>2020-02-01</td>
                                        <td>8.0</td>
                                        <td>4.5</td>
                                        <td>56.3%</td>
                                        <td>300</td>
                                        <td>200</td>
                                        <td>66.7%</td>
                                        <td>4.0</td>
                                         <td>88.9%</td>
                                          <td>33.3%</td>
                                    </tr>
                                     <tr class="listTableText list_list">
                                        <td>贴片机</td>
                                        <td>XAM-2020-001</td>
                                        <td>电装线</td>
                                        <td>2020-02-02</td>
                                        <td>8.0</td>
                                        <td>4.5</td>
                                        <td>56.3%</td>
                                        <td>300</td>
                                        <td>200</td>
                                        <td>66.7%</td>
                                        <td>4.0</td>
                                         <td>88.9%</td>
                                          <td>33.3%</td>
                                    </tr>
                                     <tr class="listTableText list_list">
                                        <td>贴片机</td>
                                        <td>XAM-2020-001</td>
                                        <td>电装线</td>
                                        <td>2020-02-03</td>
                                        <td>8.0</td>
                                        <td>4.5</td>
                                        <td>56.3%</td>
                                        <td>300</td>
                                        <td>200</td>
                                        <td>66.7%</td>
                                        <td>4.0</td>
                                         <td>88.9%</td>
                                          <td>33.3%</td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>
	                    <!-- 页码区域 -->
	                    <div class="page_area contentText clear">
	                    	<div class="page_sum">
	                    		共<span class="page_number"> 3 </span>页&emsp;每页 10 条&emsp;共<span class="info_sum"> 3 </span>条记录
	                    	</div>
	                        <div class="page_jump">
	                        	<span>跳转到&emsp;第</span>
	                        	<input type="text" name="" id="" value="" />
	                        	<span>页&emsp;</span>
	                        	<button>Go</button>
	                        </div>
	                        <div class="page-pull-right async-page">
	                            <button>上一页</button>
	                            <button class="select_page">1</button>
	                            <button>2</button>
	                            <button>3</button>
	                            <button style="color: rgb(30, 30, 30);">▪▪▪</button>
	                            <button>98</button>
	                            <button>99</button>
	                            <button>100</button>
	                            <button>下一页</button>
	                        </div>
	                    </div>
                    </div>
                    
                    <div class="list_area">
				                        <!-- 信息列表区 -->
                        <div class="info_area">
                        	<!-- echarts 统计图表 -->
                        	<div class="chart" id="main" style="width: 100%;height: 350px;z-index: 0;">				                  				                        		
                        	</div>
                        </div>
                    </div>
                </div>
			</div>
			
			<!-- 版尾  -->
			<div class="ending">
				Copyright© 2019-2020 磐基技术有限公司
			</div>
			
			<!-- 等待加载 -->
			<!--<div class="loader"><p class="load_hint">请等待加载••••••</p></div>-->
			
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src='../../js/common/common.js' type='text/javascript' charset='utf-8'></script>
		<script src="../../js/3rd/jquery-ui.js" type="text/javascript"></script>
		<script src="../../js/3rd/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		var h = document.documentElement.clientHeight;
		$(".wrap").css("height", h);
		
		// 获取每行 td 的兄弟节点
		$("td").hover(   
			function () {      
				$(this).parent().children().addClass("td_hover");   
			},    
			function () {      
				$(this).parent().children().removeClass("td_hover");   
			}
		);
		
		
		$("#dateControl").datepicker({
	        	dateFormat : 'yy-mm-dd',
	            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
	 		 	changeYear:true,
	 		 	changeMonth:true,
	 		 	showOn:"button",
	 		 	buttonImage:"../../img/button/calendar.png",
	 		 	buttonImageOnly:false
	        });
	        $("#dateControl2").datepicker({
	        	dateFormat : 'yy-mm-dd',
	            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
	 		 	changeYear:true,
	 		 	changeMonth:true,
	 		 	showOn:"button",
	 		 	buttonImage:"../../img/button/calendar.png",
	 		 	buttonImageOnly:false
	        });
		
		//显示图表
		function showGraph(){
			var myChart = echarts.init(document.getElementById('main'));
			var option = {
			    title: {
			        text: 'OEE分析'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data: ['时间开动率', '性能开动率', '合格率', 'OEE']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['20200201', '20200202', '20200203', '20200204', '20200205', '20200206', '20200207']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name: '时间开动率',
			            type: 'line',
			            stack: '总量',
			            data: [0.5, 0.52, 0.55, 0.60, 0.68, 0.75, 0.67]
			        },
			        {
			            name: '性能开动率',
			            type: 'line',
			            stack: '总量',
			            data: [0.3, 0.32, 0.38, 0.40, 0.45, 0.42, 0.32]
			        },
			        {
			            name: '合格率',
			            type: 'line',
			            stack: '总量',
			            data: [0.6, 0.68, 0.8, 0.85, 0.74, 0.64, 0.9]
			        },
			        {
			            name: 'OEE',
			            type: 'line',
			            stack: '总量',
			            data: [0.21,0.12, 0.18, 0.19,0.25,0.25, 0.27]
			        }
			    ]
			};
			myChart.setOption(option);
		}
		showGraph();
	</script>
</html>
